<template>
	<view class="add_md_item">
		<!-- 添加药品名称 -->
		<view class="drug" v-if="addType === '药品名称'">
			<input class="drug_input" :focus="true" type="text" v-model="drugName" />
			<view class="drug_box" @click.stop="returnPage(1)">
				<image   class="drug_img" :src="require('../../status/image/return.png')" mode=""></image>
			</view>
			 
		</view>
		<!-- 添加服药剂量 -->
		<view class="drug" v-if="addType === '单次服药剂量'">
			<input class="drug_input" :focus="true" type="number" v-model="dose" />
			<view class="drug_box" @click.stop="returnPage(2)">
				<image   class="drug_img" :src="require('../../status/image/return.png')" mode=""></image>
			</view>
			 
		</view>
		<!-- 持续时间 -->
		<view class="drug" v-if="addType === '服药持续时间'">
			<input class="drug_input" :focus="true" type="number" v-model="continuedTime" />
			<view class="drug_box" @click.stop="returnPage(3)">
				<image   class="drug_img" :src="require('../../status/image/return.png')" mode=""></image>
			</view>
			 
		</view>
		<!-- 服药周期 -->
		<view class="cycle" v-if="addType === '服药周期'">
			<view class="cycle_time" @click="cycleType(1)">
				<text>每日</text>
				<image v-show="correctNav == 1" class="correct_img" :src="require('../../status/image/correct.png')" mode=""></image>
			</view>
			<view class="cycle_time" @click="cycleType(2)">
				<text>自定义</text>
				<image v-show="correctNav == 2" class="correct_img" :src="require('../../status/image/correct.png')" mode=""></image>
			</view>
			
			<view v-show="correctNav == 2">
				<view class="cycle_custom">
					<view class="custom_xuanz">
						<radio-group @change="radioChange" style="width: 100%; display: flex; justify-content: space-around;">
							<label class="radio">
								<radio value="0" checked="true" />每周</label>
							<label class="radio">
								<radio value="1" />每隔X天</label>
						</radio-group>
					</view>
				</view>
				<text class="cycle_info">{{cycleInfo}}</text>
				
				<view class="uni-list" v-show="radioType == 0">
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell" v-for="item in items" :key="item.value">
							<view>{{item.name}}</view>
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
						</label>
					</checkbox-group>
				</view>
				<view class="screen_time" v-show="radioType == 1">
					{{cycleTime}}
					<u-select mode="single-column" v-model="ShowUselect" :list="selectList" @confirm="confirm"></u-select>
				</view>
			</view>
			<view class="cycle_btn" @click="returnPage(4)">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addType: '',
				// 药品名称
				drugName: '',
				// 每日 自定义
				correctNav: 1,
				// 剂量
				dose: '',
				// 持续时间
				continuedTime: '',
				currentCycle: 0,
				// 0是每周，1是每个X天
				radioType: 0,
				// 1是每日 2 是自定义
				uSelectNum: 1,
				// 时间选择格式
				type: 'date',
				// u-select显示
				ShowUselect: false,
				// 选择的天数 默认周一到周日
				cycleTime: [1,2,3,4,5,6,0], 
				cycleInfo: '自定义一周的提醒时间',
				items: [{
						value: '1',
						name: '星期一',
						checked: true
					},
					{
						value: '2',
						name: '星期二',
						checked: true
					},
					{
						value: '3',
						name: '星期三',
						checked: true
					},
					{
						value: '4',
						name: '星期四',
						checked: true
					},
					{
						value: '5',
						name: '星期五',
						checked: true
					},
					{
						value: '6',
						name: '星期六',
						checked: true
					},
					{
						value: '0',
						name: '星期日',
						checked: true
					},
				],
				selectList: [
					{ 
						label: '1天'
					},
					{ 
						label: '2天'
					},
					{
						label: '3天'
					},
					{
						label: '4天'
					},
					{
						label: '5天'
					},
					{
						label: '6天'
					},
					{
						label: '7天'
					},
					{
						label: '8天'
					},
					{
						label: '9天'
					},
					{
						label: '10天'
					},
					{
						label: '11天'
					},
					{
						label: '12天'
					},
					{
						label: '13天'
					},
					{
						label: '14天'
					},
					{
						label: '15天'
					},
					{
						label: '16天'
					},
					{
						label: '17天'
					},
					{
						label: '18天'
					},
					{
						label: '19天'
					},
					{
						label: '20天'
					},
					{
						label: '21天'
					},
					{
						label: '22天'
					},
					{
						label: '23天'
					},
					{
						label: '24天'
					},
					{
						label: '25天'
					},
					{
						label: '26天'
					},
					{
						label: '27天'
					},
					{
						label: '28天'
					},
					{
						label: '29天'
					},
					{
						label: '30天'
					},
					{
						label: '31天'
					},
				],
			};
		},
		onLoad(options) {
			this.addType = options.type
		},
		methods: {
			returnPage(index) {
				if (index == 1) {
					uni.redirectTo({
						url: '../addMdication/index?drugName=' + this.drugName
					})
				} else if (index == 2) {
					uni.redirectTo({
						url: '../addMdication/index?dose=' + this.dose
					})
				} else if (index == 3) {
					uni.redirectTo({
						url: '../addMdication/index?continuedTime=' + this.continuedTime
					})
				}else if (index == 4){  
					if(this.uSelectNum == 1){
						uni.redirectTo({
							url: '../addMdication/index?uSelectNum=' + this.uSelectNum
						})
					}else{
						uni.redirectTo({
							url: '../addMdication/index?uSelectNum=' + this.uSelectNum + '&cycleTime=' + this.cycleTime
						})
					} 
				}
			},
			cycleType(index) {
				this.correctNav = index
				this.uSelectNum = index
			},
			radioChange(value) { 
				this.radioType = value.target.value
				if (!value.target.value) {
					this.cycleInfo = '自定义一周的提醒时间'
					this.ShowUselect = false
				} else {
					this.cycleInfo = '选择间隔周期'
					this.ShowUselect = true
					this.cycleTime = '1天'
				}
			},
			checkboxChange(value) {
				this.cycleTime = value.detail.value 
			},
			// 选择时间
			dateTimeChange(value) {
				console.log(value)
			},
			// 单列选择时间
			confirm(e){ 
				this.cycleTime = e[0].label
			},
			
		}
	}
</script>

<style lang="less">
	.add_md_item {
		.drug {
			position: relative;

			.drug_input {
				padding: 0 20rpx;
				width: 540rpx;
				margin: 20rpx;
				height: 80rpx;
				background-color: #fff;
				border-radius: 10rpx;
			}
			.drug_box{
				position: absolute;
				right: 40rpx;
				bottom: 10rpx;
				width: 120rpx; 
				z-index: 100;
				.drug_img { 
					display: block;
					margin: 0 auto;
					width: 60rpx;
					height: 60rpx;
					z-index: 10; 
				}
			}
			 
		}

		.cycle {
			.cycle_time {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				background-color: #fff;
				border-bottom: 1rpx solid #eee;

				.correct_img {
					margin: auto 0;
					width: 40rpx;
					height: 30rpx;
				}
			}

			.cycle_custom {
				margin-top: 10rpx;

				.custom_xuanz {
					display: flex;
					justify-content: space-around;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #fff;
				}
			}

			.cycle_info {
				padding: 0 20rpx;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;

			}
			.cycle_btn{
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				margin: 30rpx;
				border-radius: 20rpx;
				background-color: #03c97d;
			}
			.uni-list {
				padding: 0 20rpx;
				background-color: #fff;

				.uni-list-cell {
					padding: 30rpx 30rpx 0 30rpx;
					display: flex;
					justify-content: space-between;
					height: 70rpx;
					border-bottom: 1rpx solid #eee;
				}
			}

			.screen_time {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 42rpx;
				background-color: #fff; 
			}
		}
	}
</style>
